import { createStyles } from 'antd-style';
import { EventInfo } from '#/entity.ts';
import { FC } from 'react';
import './dot.css';
import { getColor } from '@/pages/eventCenter/utils.ts';

type Props = {
  handleStatus: EventInfo['handleStatus'];
};

const Dot: FC<Props> = ({ handleStatus }) => {
  const color = getColor(handleStatus);
  const { styles } = createStyles(({ css }) => {
    return {
      circleContainer: css`
        position: relative;
        width: 8px;
        height: 8px;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: ${color.ring}; /* 半透明的淡红色 */
          border-radius: 50%; /* 形成圆形 */
        }

        & .quarter-circle {
          position: absolute;
          top: 25%;
          left: 25%;
          width: 50%;
          height: 50%;
          background-color: ${color.bg}; /* 内圆的纯红色 */
          border-radius: 50%;
        }
      `,
    };
  })();

  return (
    <div className={styles.circleContainer}>
      <div className="quarter-circle"></div>
    </div>
  );
};

export default Dot;
